.copyable {
  cursor: pointer;
  transition: background-color background 0.2s;

  & .show-more__button {
    background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative) 33%);
  }

  &:hover {
    background-color: var(--color-background-alternative-hover);

    & .show-more__button {
      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-hover) 33%);
    }
  }

  &.clicked {
    background-color: var(--color-background-alternative-pressed);

    & .show-more__button {
      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
    }

    &:hover {
      background-color: var(--color-background-alternative-pressed);

      & .show-more__button {
        background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
      }
    }
  }

  &.sensitive {
    &.visible {
      background-color: var(--color-error-muted);


      & .show-more__button {
        background: linear-gradient(90deg, transparent 0%, var(--color-error-muted) 33%);
      }

      &:hover {
        background-color: var(--color-error-muted-hover);

        & .show-more__button {
          background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
        }
      }

      &.clicked {
        background-color: var(--color-error-muted-pressed);

        & .show-more__button {
          background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
        }


        &:hover {
          background-color: var(--color-error-muted-pressed);

          & .show-more__button {
            background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
          }
        }
      }
    }
  }

  &__icon {
    margin-top: 2px;
  }

  &__tooltip {
    display: flex;
    align-items: center;

    & > div {
      display: flex !important;
    }
  }
}
